<template>
    <!-- 
        action	必选参数，上传的地址	string
        list-type	文件列表的类型	string	text/picture/picture-card
        on-preview	点击文件列表中已上传的文件时的钩子	function(file)
        on-remove	文件列表移除文件时的钩子	function(file, fileList)
        on-success	文件上传成功时的钩子	function(response, file, fileList)
        multiple	是否支持多选文件	boolean
        file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
     -->
    <div>
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="onSuccess" :file-list="fileList">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'upload-page',
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[]
        };
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 图片上传成功以后，把图片的地址传给父组件使用
        onSuccess(response, file, fileList){
            console.log('response',response,'file',file,'fileList',fileList);
            this.$emit('sendImgUrl',file)
        },
        // 父组件中通过 ref 属性调用子组件中的方法，清除内容
        clean(){
            this.fileList = []
        },
    }
}
</script>
<style scoped></style>